<template>
  <section class="feedback-section">
    <div class="feedback-title">真实客户案例</div>
    <div class="feedback-desc">友福智能健康-用AI重塑人类健康未来</div>
    <div class="feedback-list">
      <el-carousel
        ref="carouselRef"
        trigger="click"
        height="460px"
        arrow="always"
        interval="3800"
        @change="carouselChange"
      >
        <el-carousel-item v-for="(itemList, index) in feedbackList" :key="index" :name="index">
          <div v-for="(item, idx) in itemList" :key="`${item.username}-${idx}`" class="feedback-card">
            <div class="popover-container">
              <div class="avatar-container">
                <el-image
                  :ref="(el: any) => (imageRefs[idx] = el)"
                  :src="item.caseImage"
                  alt="certificate"
                  class="certificate-image"
                  :zoom-rate="1"
                  scale="0.8"
                  :hide-on-click-modal="true"
                  :preview-src-list="[item.caseImage]"
                  show-progress
                  preview-teleported
                  fit="contain"
                  :initial-index="idx"
                />
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="el-timeline__dot">
      <div
        v-for="(_, index) in feedbackList"
        :key="index"
        class="el-item__dot"
        :class="{ 'el-item__dot--active': index === currentIndex }"
        @click="handleSwitch(index)"
      ></div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { CarouselInstance, ImageInstance } from 'element-plus'
import { newRealCasesWithImage } from '@/data/caseImage.ts'

// 定义案例数据类型
type CaseItem = {
  username: string
  case: string
  avatar: string
  result: string
  caseImage: string
}

// 图片引用集合
const imageRefs = ref<(ImageInstance | null)[]>([])
// Carousel 实例引用（指定类型）
const carouselRef = ref<CarouselInstance | null>(null)
// 当前激活的轮播索引
const currentIndex = ref(0)

// 切换轮播项
const handleSwitch = (target: number) => {
  if (carouselRef.value) {
    carouselRef.value.setActiveItem(target)
  }
}

// 轮播切换时更新索引
const carouselChange = (newIndex: number) => {
  currentIndex.value = newIndex
}

// 数组按3个一组随机拆分
function splitIntoGroupsOfThree<T>(arr: T[]): T[][] {
  const shuffled = [...arr]
  // Fisher-Yates 洗牌（随机打乱数组）
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1))
    ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
  }
  // 按3个一组拆分
  const groups: T[][] = []
  for (let i = 0; i < shuffled.length; i += 3) {
    groups.push(shuffled.slice(i, i + 3))
  }
  return groups
}

// 处理案例数据为分组形式
const feedbackList = reactive<CaseItem[][]>(splitIntoGroupsOfThree(newRealCasesWithImage))
</script>

<style scoped lang="less">
// 基础变量
@bg-color: #f9fbff;
@card-bg: #ffffff;
@radius: 12px;
@padding: 16px;
@avatar-size: 60px;
@subtext-color: #999;
@transition: all 0.3s ease;
.feedback-section {
  background-color: @bg-color;
  padding: 0 0 100px 0;
  text-align: center;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 60px;
    z-index: 1;
    pointer-events: none;
    left: 100px;
  }

  .feedback-title {
    padding: 50px 0 0;
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: @text-color;
  }

  .feedback-desc {
    font-size: 20px;
    color: @text-color-secondary;
  }

  .el-timeline__dot {
    width: auto;
    display: inline-flex;
    height: 36px;
    padding: 8px 20px;
    align-items: center;
    gap: 20px;
    border-radius: 100px;
    background: #f5f7fe;
    margin-top: 20px;

    .el-item__dot {
      width: 10px;
      height: 10px;
      border-radius: 100px;
      opacity: 0.2;
      background: var(--313-fa-8, #313fa8);
    }

    .el-item__dot--active {
      width: 20px;
      border-radius: 100px;
      opacity: 1;
      background: var(--313-fa-8, #313fa8);
    }
  }

  .feedback-list {
    max-width: 1820px;
    margin: 0 auto;
    margin-left: 100px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: row;
  }

  .feedback-card {
    margin-top: 50px;
    display: inline-block;

    .popover-container {
      width: 492px;
      height: 352px;
      display: inline-block;
      margin-right: 30px;
    }

    .avatar-container {
      .certificate-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .feedback-info {
      text-align: left;
      max-width: calc(100% - @avatar-size - 12px);

      .username {
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .comment {
        font-size: 14px;
        color: @text-color;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 42px;
        transition: max-height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
    }
  }
}

:deep(.el-image-viewer__canvas) {
  height: 80vh;
}

@media (max-width: 768px) {
  .feedback-card {
    width: 100%;
    max-width: 320px;
  }
}
</style>

<style lang="less">
.custom-popover {
  border-radius: 18px !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 4px 16px rgba(79, 79, 79, 0.08) !important;
  padding: 22px !important;

  ._userinfo {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }

  ._userPic {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f3f5f7;
    box-shadow: 0 0 16px rgba(79, 79, 79, 0.08);
    margin-right: 10px;
  }

  ._username {
    font-size: 20px;
    font-weight: 600;
    color: @text-color;
  }

  ._comment {
    font-size: 16px;
    color: @text-color-secondary;
  }
}

.el-carousel {
  width: 100%;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}
</style>
